<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="searchList" label-width="140px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="毕业年份">
                        <el-date-picker
                            class="search-item"
                            :clearable = false
                            @change="handleGradeChange"
                            v-model="queryForm.condition.grade"
                            value-format="yyyy"
                            type="year"
                            placeholder="请选择"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学院">
                        <el-select
                            v-model="queryForm.condition.collegeId"
                            filterable
                            @change="handleCollegeChange"
                            class="search-item"
                            clearable
                        >
                            <el-option
                                v-for="item in source.collegeOptions"
                                :key="item.collegeId"
                                :label="item.collegeIdI18n"
                                :value="item.collegeId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业">
                        <el-select
                            v-model="queryForm.condition.subjectId"
                            filterable
                            class="search-item"
                            clearable
                            @change="handleSubjectChange"
                        >
                            <el-option
                                v-for="item in source.subjectOptions"
                                :key="item.subjectId"
                                :label="item.subjectName"
                                :value="item.subjectId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">同济大学{{currentGrade}}届毕业设计(论文)情况统计表</div>
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <el-button type="default" @click="exportFile()">{{$t('message.export')}}</el-button>
                </div>
            </div>
            <el-table :data="resultList" size="mini" style="width:100%" tooltip-effect="light">
                <el-table-column
                    v-if="order"
                    :label="$t('message.order')"
                    :index="indexMethod"
                    :fixed="orderFixed"
                    type="index"
                    width="55"
                    align="center"
                />
                <el-table-column label="学生情况" prop="facultyI18n" width="150px">
                    <el-table-column label="学号" prop="studentId" width="120px"></el-table-column>
                    <el-table-column label="姓名" prop="studentName" width="120px"></el-table-column>
                    <el-table-column label="成绩" prop="studentResult" width="120px"></el-table-column>
                </el-table-column>
                <el-table-column label="课题名称" prop="projectName" width="120px" show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="课题情况">
                    <el-table-column label="类型">
                        <el-table-column label="毕业设计" width="120px">
                             <template
                                slot-scope="scope"
                            >{{transData(scope.row.projectTypeList[0])}}</template>
                        </el-table-column>
                        <el-table-column label="毕业论文" width="120px">
                            <template
                                slot-scope="scope"
                            >{{transData(scope.row.projectTypeList[1])}}
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="来源">
                        <el-table-column
                            v-for="(item, index) in sourceList"
                            :key="index"
                            min-width="120"
                        >
                        <template slot="header" slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <span>{{item.subjectSource}}</span>
                                    <div
                                        slot="reference"
                                        style="width: 120px;padding: 0px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;"
                                    >
                                        <span>{{item.subjectSource}}</span>
                                    </div>
                                </el-popover>
                        </template>
                            <template
                                slot-scope="scope"
                            >{{transData(scope.row.sourceIdList[index])}}</template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="性质">
                        <el-table-column
                            v-for="(item, index) in natureList"
                            :key="index"
                            min-width="120"
                        >
                        <template slot="header" slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <span>{{item.subjectProperties}}</span>
                                    <div
                                        slot="reference"
                                        style="width: 120px;padding: 0px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;"
                                    >
                                        <span>{{item.subjectProperties}}</span>
                                    </div>
                                </el-popover>
                        </template>
                            <template
                                slot-scope="scope"
                            >{{transData(scope.row.propertiesIdList[index])}}</template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="毕业设计(论文)地点" prop="designPlace" width="150px" show-overflow-tooltip="true"/>
                <el-table-column label="指导老师" width="150px">
                    <el-table-column label="校内">
                        <el-table-column label="姓名" prop="innerTeacherName" width="120px"></el-table-column>
                        <el-table-column label="职称" prop="innerTeacherTitle" width="120px"></el-table-column>
                    </el-table-column>
                    <el-table-column label="校外">
                        <el-table-column label="高校" width="120px">
                            <el-table-column label="姓名" prop="outTutorList[0]" width="120px"></el-table-column>
                            <el-table-column label="职称" prop="outTutorList[1]" width="120px"></el-table-column>
                            <el-table-column label="高校名称" prop="outTutorList[2]" width="120px"></el-table-column>
                        </el-table-column>
                        <el-table-column label="企事业" width="120px">
                            <el-table-column label="姓名" prop="outTutorList[3]" width="120px"></el-table-column>
                            <el-table-column label="职称" prop="outTutorList[4]" width="120px"></el-table-column>
                            <el-table-column label="单位名称" prop="outTutorList[5]" width="120px"></el-table-column>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="其中社会实践情况" width="150px">
                    <el-table-column
                        v-for="(item, index) in socialList"
                        :label="item.sociaPractice"
                        :key="index"
                        width="120px"
                    >
                        <template slot-scope="scope">{{transData(scope.row.sociaIdList[index])}}</template>
                    </el-table-column>
                </el-table-column>
              <el-table-column label="学籍信息" prop="facultyI18n" width="150px">
                <el-table-column label="学院名称" prop="facultyI18n" width="120px"></el-table-column>
                <el-table-column label="学籍专业名称" prop="statusProfessionI18n" width="120px"></el-table-column>
                <el-table-column label="学籍专业代码" prop="statusProfession" width="120px"></el-table-column>
                <el-table-column label="国标专业代码" prop="eduNetProfessionCode" width="120px"></el-table-column>
              </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import API from 'common/src/api/underGraduationDesign/reviewSubject'
import { getList,exportData,getReportStatus } from 'common/src/api/underGraduationDesign/totalStastic'
import tools from 'common/src/views/underGraduationDesign/tools.js';
export default {
    name: 'totalStastic',
    props: {
        orderFixed: {
            // 序号是否固定
            type: Boolean,
            default: false
        },
        order: {
            // 是否加上序号
            type: Boolean,
            default: true
        },
        defaultIndex: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            api: API,
            queryForm: {
                condition: {
                    grade: new Date().getFullYear().toString(),
                    collegeId: '',
                    subjectId: '',
                    collegeIdI18n: '',
                    subjectIdI18n: ''
                }
            },
            currentGrade:null,
            resultList: [],
            natureList: [],
            sourceList: [],
            socialList: [],
            source: {
                collegeOptions: [],
                subjectOptions: [] // 专业
            }
        }
    },
    mounted() {
        this.getCollege()
        this.searchList()
    },
    methods: {
        transData(data) {
            if (data == 0) {
                return ''
            }
            return '√'
        },
        indexMethod(index) {
            if (this.defaultIndex) return index
            else return index + 1
        },
        searchList() {
            let date = new Date();
            if (null == this.queryForm.condition.grade) {
                this.queryForm.condition.grade = date;
            }
            var grade = this.queryForm.condition.grade;
            if (grade instanceof Date) {
                grade = grade.getFullYear();
            }
            this.currentGrade = grade;
            this.getSubjectNature(grade)
            this.getSubjectSource(grade)
            this.getSocialPractice(grade)
            var param = {
                grade: grade,
                collegeId: this.queryForm.condition.collegeId,
                subjectId: this.queryForm.condition.subjectId
            }
            getList(param).then(res => {
                var list = res.data
                this.resultList = list
            })
        },
        // 查课题性质
        getSubjectNature(grade) {
            const params = {
                year: grade
            }
            this.api
                .getNature(params)
                .then(res => {
                    this.natureList = res.data
                })
                .catch()
        },
        getSubjectSource(grade) {
            const params = {
                year: grade
            }
            this.api
                .getSource(params)
                .then(res => {
                    this.sourceList = res.data
                })
                .catch()
        },
        // 查社会实践
        getSocialPractice(grade) {
            const params = {
                year: grade
            }
            this.api
                .getPractice(params)
                .then(res => {
                    this.socialList = res.data
                })
                .catch()
        },
        reset() {
            this.queryForm = {
                condition: {
                    grade: new Date(),
                    collegeId: '',
                    subjectId: ''
                }
            }
            this.source.subjectOptions = []
            this.searchList()
        },
        // 查学院
        getCollege() {
            this.api.getCollege().then(res => {
                this.source.collegeOptions = res
            })
        },
        handleGradeChange(val) {
            this.queryForm.condition.subjectId = null
            this.source.subjectOptions = []
            if (val && this.queryForm.condition.collegeId) {
                this.handleCollegeChange(this.queryForm.condition.collegeId)
            }
        },
        // 选择年份和学院查专业
        handleCollegeChange(val) {
            this.queryForm.condition.collegeIdI18n = this.source.collegeOptions.filter(item => item.collegeId === val)[0].collegeIdI18n;
            this.queryForm.condition.subjectId = ''
            this.source.subjectOptions = []
            var grade = this.queryForm.condition.grade;
            if (grade instanceof Date) {
                grade = grade.getFullYear();
            }
            if (val && grade) {
                const params = {
                    grade: grade,
                    college: val
                }
                this.api
                    .getSubject(params)
                    .then(res => {
                        this.source.subjectOptions = res.data
                    })
                    .catch()
            }
        },
        handleSubjectChange(val) {
          this.queryForm.condition.subjectIdI18n = this.source.subjectOptions.filter(item => item.subjectId === val)[0].subjectName;
        },
        exportFile() {
            var grade = this.queryForm.condition.grade
            if (grade instanceof Date) {
                this.queryForm.condition.grade = grade.getFullYear()
            }
            exportData(this.queryForm.condition).then(res => {
                // let loading = this.$loading({
                //     lock: false,
                //     text: 'Loading',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(255, 255, 255, .48)'
                // })
                // this._delayRequest(res.data.key)
              tools.downloadFile(res.data.key, `同济大学${this.queryForm.condition.grade}届毕业设计(论文)情况统计表.xls`, getReportStatus, this);
            })
        },
        async _delayRequest(key) {
            this.loading = true
            await new Promise(resolve => setTimeout(resolve, 3000))
            getReportStatus(key)
                .then(res => {
                    if (res.code === 200 && res.data.status) {
                      tools.doDownload(res.data.path, "毕业设计(论文)汇总.xls");
                       /* let path =
                            'api/designservice/resultPublish/downLoadMore?path=' +
                            res.data.path +
                            '&fileName=totalStastic.xls'
                        window.open(path)*/
                    } else {
                        this._delayRequest(key)
                    }
                })
                .catch(ex => {
                    this.loading = false
                    this._delayRequest(key)
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.review-topic {
    .search-item {
        width: 100%;
    }
}
.el-table-column {
    text-align: center;
    word-wrap: none;
    word-break: break-all;
}
</style>
